import React, { Component } from 'react'
import '../../../commponents/LH/Visitor/Visitor.css'
import { Button, Dropdown, DatePickerProps, Table, Select, DatePicker, Space, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Link } from 'react-router-dom';
import service from '../../../utils/service';
// 删除按钮得显示与隐藏
const { Option } = Select;
const { RangePicker } = DatePicker;

interface DataType {
    name: any;
    time: any;
    MAC: any;
    typ: any;
    sta: any;
    btn: any;
}

export default class Visitor extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            dat: [],
            val: '',
            tim: '',
            types: '',
            stau: '',
        }

    }
    // 删除数据
    del(text: any, record: any, index: any) {
      alert('你确定要删除吗')
        service({
            url: `/passenger/${record.id}`,
            method: 'delete'
        }).then(res => {
            service({
                url: '/passenger'
            }).then(res => {
                this.setState({
                    dat: res.data,
                })

            })


        })
    }
    // 路由跳转到编辑
    redact = (text: any, record: any, index: any) => {
        this.props.history.push({ pathname: '/Main/Rea', query: { record } })

    }
    columns: ColumnsType<DataType> = [
        {
            title: '设备名',
            dataIndex: 'name',
            width: 150,
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            width: 180,
            align: 'center',
        },
        {
            title: 'MAC地址',
            dataIndex: 'MAC',
            width: 180,
            align: 'center',
        },
        {
            title: '屏幕类型',
            dataIndex: 'typ',
            width: 180,
            align: 'center',
        },
        {
            title: '运行状态',
            dataIndex: 'sta',
            width: 180,
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'btn',
            width: 180,
            align: 'center',
            render: (text, record, index) => (<div>
                <button className='butn' onClick={() => this.redact(text, record, index)}>编辑</button>
                <button className='butn1' onClick={() => { this.del(text, record, index) }} >删除</button>
            </div>)
        },
    ];
    // 发请求获取数据
    componentDidMount(): void {
        service({
            url: '/passenger'
        }).then(res => {
            this.setState({
                dat: res.data,
            })
        })

    }
    // 跳转到添加的路由组件
    edit = () => {
        this.props.history.push('/Main/Edit')
    }
    // 筛选查询数据，发请求不用携带获取完整的数据，然后操作数据渲染，不操作数据，用数组filter也可以筛选查询
    search = () => {
        if (this.state.val) {
            service({
                url: '/passenger',
                method: 'get',
                data: `name=${this.state.val}`,
                params: {
                    name: this.state.val,
                }
            }).then(res => {
                this.setState({
                    dat: res.data,
                })
            })
        } else if (this.state.tim) {
            service({
                url: '/passenger',
                method: 'get',
                data: `time=${this.state.tim}`,
                params: {
                    time: this.state.tim,
                }
            }).then(res => {
                this.setState({
                    dat: res.data,
                })

            })
        } else if (this.state.types) {
            service({
                url: '/passenger',
                method: 'get',
                data: `typ=${this.state.types}`,
                params: {
                    typ: this.state.types,
                }
            }).then(res => {
                this.setState({
                    dat: res.data,
                })
            })
        } else if (this.state.stau) {
            service({
                url: '/passenger',
                method: 'get',
                data: `sta=${this.state.stau}`,
                params: {
                    sta: this.state.stau
                }
            }).then(res => {
                this.setState({
                    dat: res.data,
                })
                console.log(this.state.stau)
            })
        } else {
            service({
                url: '/passenger',
                method: 'get',
                data: `name=${this.state.val}&time=${this.state.tim}&typ=${this.state.types}&sta=${this.state.stau}`,
                params: {
                    name: this.state.val,
                    time: this.state.tim,
                    typ: this.state.types,
                    sta: this.state.stau
                }
            }).then(res => {
                this.setState({
                    dat: res.data,
                })
            })
        }


    }
    // 重置查询的数据
    reset = () => {
        service({
            url: '/passenger'
        }).then(res => {
            this.setState({
                dat: res.data,
            })
        })
        // 重置后需要把内容清除
        console.log('val', this.state.val)
    }
    render() {
        return (
            <div>
                <Input allowClear placeholder="设备名/MAC地址" style={{ width: '200px', }} onChange={(e) => { this.setState({ val: e.target.value }) }} />
                <Space direction="vertical" size={12} style={{ marginLeft: '15px' }}>
                    <DatePicker onChange={(date, dateString) => { this.setState({ tim: dateString }) }} />
                </Space>
                <Select allowClear placeholder='屏幕类型' style={{ width: '142px', marginLeft: '20px' }} onSelect={(value) => { this.setState({ types: value }) }}>
                    <Option value="全部">全部</Option>
                    <Option value="单屏">单屏</Option>
                    <Option value="双屏">双屏</Option>
                </Select>
                <Select allowClear style={{ width: '142px', marginLeft: '20px' }} placeholder='运行状态' onSelect={(value) => { this.setState({ stau: value }) }}>
                    <Option value="全部">全部</Option>
                    <Option value="运行中">运行中</Option>
                    <Option value="暂停运行">暂停运行</Option>
                </Select>
                <button onClick={this.search} className='butn2'>查 询</button>
                <button className='butn3' onClick={this.reset}>重 置</button>
                <button className='butn4' onClick={this.edit}> + 添加访客机</button>
                {/* 一共查询的结果数据展示 */}
                <div className='cxjg'>
                    <p style={{ marginLeft: '15px', color: '#000000A5', fontSize: '14px' }}>查询结果：共计<span style={{ color: '#1890FF' }}> {this.state.dat.length} </span>条数据</p>
                </div>
                <div style={{ marginTop: '20px' }}>
                    <Table columns={this.columns} dataSource={this.state.dat} pagination={{ pageSize: 10 }} scroll={{ y: 460 }} bordered={true} />
                </div>

            </div>
        )
    }
}
